<template>
  <div class="view-mask">
    <section @click="onClick">
      <van-empty :image="image" :description="getMessage" />
      <span class="f18 btnText">{{getButtonText}}</span>
    </section>

  </div>
</template>

<script>
import { computed, getCurrentInstance, onMounted } from 'vue'
import ViewState from './view_state'
import { useI18n } from 'vue-i18n'
import { useRoute, useRouter } from 'vue-router'
export default {
  props: {
    image:{
      type:String,
      default:require('@/assets/img/empty/empty-image-default.png')
    },
    buttonText:String,
    context:{
      type:Object,
      required:true
    },
  },
  setup(props, ctx){
    const {t} = useI18n()
    const router = useRouter()
    const route = useRoute()
    const getMessage = computed(()=>{
      return (props.context.message || t('暂无数据')).replace('error_code.','')
    })
    const getButtonText = computed(()=>{
      return props.buttonText || t('刷新')
    })
    function onClick(){
      if(props.context.viewState == ViewState.unAuthorized){
        router.push({name:'login', query:{curl:encodeURIComponent(route.fullPath)}})
      } else {
        props.context.refresh(true)
      }
    }
    return {
      onClick,
      getMessage,
      getButtonText
    }
  }
}
</script>

<style lang="less" scoped>
.view-mask{
  position: absolute;
  left: 0;
  top: 0;
  right:0;
  bottom:0;
  z-index:1;
  section {
    position: relative;
    margin: 0.1rem;
    height: calc(100% - 0.2rem);
    text-align: center;
    .btnText {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0.3rem;
    }
  }
}
</style>
